<template>
  <div class="article-page">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in imgs" :key="item.id"
        ><img :src="`http://liufusong.top:8080${item.imgSrc}`" alt=""
      /></van-swipe-item>
    </van-swipe>
    <div class="search-box">
      <span
        ><a href="#/city">1 </a>
        <van-icon class="play" name="play" size="10px" color="#ccc" /><i>|</i
        ><van-icon name="search" size="20px" color="\e906"
      /></span>
      <input type="text" placeholder="请输入小区或地址" />
    </div>
    <div class="icon">
      <van-icon name="location-o" size="20px" color="\e906">
        <router-link to="/map" class="link">123</router-link></van-icon
      >
    </div>
    <div>
      <van-grid :border="false">
        <van-grid-item icon="wap-home-o" text="整租" />
        <van-grid-item icon="friends-o" text="合租" />
        <van-grid-item icon="location-o" text="地图找房" />
        <van-grid-item icon="wap-home-o" text="去出租" />
      </van-grid>
    </div>
    <div class="group">
      <h3 class="group-title">租房小组<span class="more">更多</span></h3>
    </div>
  </div>
</template>

<script>
import { LunImg } from "@/api/user";
export default {
  components: {},
  name: "ArticlePage",
  data() {
    return {
      imgs: [],
      value: "",
    };
  },
  methods: {},

  async created() {
    const data = await LunImg();
    this.imgs = data.body;
  },
};
</script>

<style lang="less" scoped>
.link {
  position: absolute;
  top: -25px;
  opacity: 0;
}
.play {
  transform: rotate(90deg);
}
a {
  color: #000;
}
.article-page {
  position: relative;
  .van-swipe-item {
    width: 375px;
    height: 216px;
  }
  img {
    position: absolute;
    top: 0;
    width: 100%;
  }
  .search-box {
    position: absolute;
    top: 22px;
    left: 10px;
    height: 20px;
    margin: 0 10px;
    padding: 5px 5px 5px 8px;
    border-radius: 3px;
    background-color: #fff;
    border-radius: 3px;
    span {
      position: absolute;
      font-size: 15px;
      i {
        color: #ccc;
        font-size: 18px;
        font-weight: 200;
        padding-right: 8px;
        line-height: 12px;
      }
    }
    input {
      // position: absolute;
      // top: ;
      height: 20px;
      width: 180px;
      line-height: 30px;
      border: 0;
      padding: 0px 25px;
      font-size: 14px;
      margin-left: 70px;
    }
  }
  .icon {
    position: absolute;
    top: 25px;
    right: 10px;
    font-size: 20px;
    color: #fff;
  }
  .group {
    background-color: #f6f5f6;
    overflow: hidden;
    padding: 0 10px;
    .group-title {
      position: relative;
      margin: 15px 0 15px 10px 10px;
      font-size: 15px;
      .more {
        color: #787d82;
        position: absolute;
        right: 0;
        font-size: 14px;
        font-weight: 400;
      }
    }
  }
}
</style>
